<template>
  <div>
    <!-- 添加或修改空车作业单对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body :close-on-click-modal="false"
      @close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="98px" label-position="right" class="flex-form"
        size="small">
        <el-form-item label="进出口类型" prop="iEFlag">
          <el-select v-model.trim="form.iEFlag" @change="iEFlagChange" placeholder="请选择进出口类型">
            <el-option key="I" label="进口" value="I" />
            <el-option key="E" label="出口" value="E" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType">
          <el-select v-model.trim="form.businessType"  @change="businessTypeChange" placeholder="请选择业务类型">
            <el-option v-for="dict in businessTypeList" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输批次号" prop="manifestId">
          <el-input v-model.trim="form.manifestId" placeholder="请输入运输批次号" />
        </el-form-item>
        <el-form-item label="作业场所" prop="workFieldCode">
          <el-select v-model.trim="form.workFieldCode" @change="workFieldCodeChange" placeholder="请选择作业场所">
            <el-option v-for="dict in selectBaseFieldInfoList" :key="dict.value" :label="dict.value+'-'+dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="gateFieldLable" prop="gateFieldCode" v-show="gateFieldItemShow">
          <el-select v-model.trim="form.gateFieldCode" @change="gateFieldCodeChange" placeholder="请选择出入境国门">
            <el-option v-for="dict in selectGateBaseFieldInfoList" :key="dict.value" :label="dict.value+'-'+dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报关企业" prop="declCopCode">
          <el-select v-model.trim="form.declCopCode" filterable clearable placeholder="请选择报关企业">
            <el-option v-for="dict in selectBgEntInfoList" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货主企业" prop="cargoOwnCode">
          <el-select v-model.trim="form.cargoOwnCode" filterable clearable placeholder="请选择货主企业">
            <el-option v-for="dict in selectHzEntInfoList" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>


        <el-divider content-position="center">运输工具信息</el-divider>
        <el-form-item label="车牌号" prop="transportName">
          <el-input v-model.trim="form.transportName" placeholder="请输入车牌号	" @focus="openSelectVehicle"
            ref="vehicleId" />
        </el-form-item>
        <el-form-item label="备案编号" prop="transportId">
          <el-input v-model.trim="form.transportId" disabled placeholder="请输入备案编号" />
        </el-form-item>
        <el-form-item label="车辆自重" prop="selfWt">
          <el-input-number v-model.trim="form.selfWt" disabled placeholder="请输入车辆自重" />
        </el-form-item>
        <el-form-item label="车辆位置" prop="location">
          <el-select v-model="form.location" placeholder="请输入车辆位置" size="medium">
            <el-option v-for="(item, index) in select_vehicle_location" :key="index" :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IC卡号" prop="icCard">
          <el-input v-model.trim="form.icCard" disabled placeholder="请输入IC卡号" />
        </el-form-item>
        <el-form-item label="电子车牌" prop="rfid">
          <el-input v-model.trim="form.rfid" disabled placeholder="请输入电子车牌" />
        </el-form-item>
        <el-divider content-position="center">挂车信息</el-divider>
        <el-form-item label="挂车车牌" prop="trayName">
          <el-input v-model.trim="form.trayName" placeholder="请输入挂车车牌" />
        </el-form-item>
        <el-form-item label="挂车重量" prop="trayWeight">
          <el-input v-model.trim="form.trayWeight" placeholder="请输入挂车重量" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

    <vehicle-select ref="vehicleSel" @returnValue="selectVehicleResult"></vehicle-select>
  </div>
</template>

<script>
  import {
    getEditGEmptyBills,
    addGEmptyBills,
    updateGEmptyBills
  } from "@/api/billsdecl/gEmptyBills";
  import {
    findListEnterpriseInfo
  } from "@/api/system/enterpriseInfo";
  import {
    findBaseFieldInfo,
    getBaseFieldInfo
  } from "@/api/system/baseFieldInfo";
  import {
    findBusinessTypeList
  } from "@/api/billsdecl/billBusinessType";
  import VehicleSelect from "@/views/billsdecl/components/VehicleSelect";
  export default {
    name: "GEmptyBills-addEdit",
    components: {
      VehicleSelect
    },
    props: {
      dialogType: {
        type: String,
        default: "add",
      },
      rowData: {
        type: Object,
        default: () => {},
      },
      dict: {}
    },
    data() {
      return {
        // 弹出层
        dialogVisible: false,
        // 标题
        title: "新增",
        userCustomsCode: this.$store.state.user.userLoginInfo.customsCode,
        userFieldCode: this.$store.state.user.userLoginInfo.fieldCode,
        // 表单参数
        form: {
          platSeqNo: null,
          billCode: null,
          manifestId: null,
          transportName: null,
          fieldCode: this.userFieldCode,
          customsCode: this.userCustomsCode,
          gateFieldCode: null,
          declCopCode: null,
          cargoOwnCode: null,
          iEFlag: null,
          billType: null,
          businessType: null,
          location: null,
          selfWt: 0,
          icCard: null,
          rfid: null,
          trayName: null,
          trayWeight: 0,
        },

        //车辆位置选择
        select_vehicle_location: [{
          value: '0',
          label: '未进场'
        }, {
          value: '1',
          label: '已进场'
        }, {
          value: '2',
          label: '已出场'
        }],
        //编辑ID
        editPlatSeqNo: null,
        //国门场所显示
        gateFieldItemShow: false,
        gateFieldLable: '入境国门',
        //单证分类，3-空车单证类型
        billCategory: '3',
        // 空车作业单表格数据
        gEmptyBillsList: [],
        //下来场所列表
        selectBaseFieldInfoList: [],
        //国门场所代码
        selectGateBaseFieldInfoList: [],
        //下来报关企业列表
        selectBgEntInfoList: [],
        //下来货主企业列表
        selectHzEntInfoList: [],
        //选择业务类型
        businessTypeList: [],

        // 表单校验
        rules: {
          transportName: [{
            required: true,
            message: "车牌号不能为空",
            trigger: "blur"
          }],
          manifestId: [{
            required: true,
            message: "批次号不能为空",
            trigger: "blur"
          }],
          location: [{
            required: true,
            message: "车辆位置不能为空",
            trigger: ["blur", "change"],
          }, ],
          customsCode: [{
            required: true,
            message: "海关编号不能为空",
            trigger: "blur"
          }],
          workFieldCode: [{
            required: true,
            message: "作业场所不能为空",
            trigger: ["blur", "change"],
          }],
          gateFieldCode: [{
            required: false,
            message: "国门场所不能为空",
            trigger: "blur"
          }],
          iEFlag: [{
            required: true,
            message: "进出口标志不能为空",
            trigger: "blur"
          }],
          businessType: [{
            required: true,
            message: "业务类型不能为空",
            trigger: "change"
          }],

        }
      };
    },
    methods: {
      open(plateSeqNo) {
        this.$nextTick(() => {
          if (this.dialogType == "add") {
            this.title = "新增";
             this.dialogVisible = true;
          } else if (this.dialogType == "edit") {
            this.title = "编辑";
             this.editPlatSeqNo=plateSeqNo;
            this.loadDetail();
          } else if (this.dialogType == "detail") {
            this.title = "详情";
             this.editPlatSeqNo=plateSeqNo;
            this.loadDetail();
          }
          this.getLoadBaseFieldInfoList();
          this.getLoadUserField();
          this.getLoadEntInfoList();
        });
      },
      close() {
        this.$refs["form"].resetFields();
        this.dialogVisible = false;
      },

      //加载用户场所信息
      getLoadUserField() {
        if (null == this.userFieldCode) {
          return;
        }
        getBaseFieldInfo(this.userFieldCode).then((res) => {
          if (res.code == 200) {
            //this.form = res.data;
            this.form.workFieldCode = this.userFieldCode;
              this.rules.workFieldCode[0].required = false;
            if (res.data.fieldType == '3') { //后置场所
              this.rules.gateFieldCode[0].required = true;
              this.gateFieldItemShow = true;
            }
          }
        });
      },
      //获取场所下拉列表
      getLoadBaseFieldInfoList() {
        findBaseFieldInfo({
          customsCode: this.userCustomsCode,
          iEFlag:this.form.iEFlag
        }).then(response => {
          this.selectBaseFieldInfoList = response.data;
          if (this.selectBaseFieldInfoList != null && this.selectBaseFieldInfoList.length == 1) {
            this.form.workFieldCode = this.selectBaseFieldInfoList[0].value;
          }
          if (this.selectBaseFieldInfoList.length > 0) {
            this.selectGateBaseFieldInfoList = this.selectBaseFieldInfoList.filter(n => "2" == n.extVal1);
          }

        })
      }, //获取企业下拉列表
      getLoadEntInfoList() {
        findListEnterpriseInfo({}).then(response => {
          let entList = response.data;
          if (entList != null && entList.length > 0) {
            this.selectBgEntInfoList = entList.filter(n => "1" == n.extVal1);
            this.selectHzEntInfoList = entList.filter(n => "2" == n.extVal1);
          }
        })
      },
      //获取业务类型列表
      getLoadBusinessTypeList() {
        findBusinessTypeList({
          iEFlag: this.form.iEFlag,
          billCategory: this.billCategory
        }).then(response => {
          this.businessTypeList = response.data;
        })
      },

      //进出口类型变更
      iEFlagChange(val) {
        this.form.businessType = null;
        if ("I" == val) {
          this.gateFieldLable = '入境国门';
          this.rules.manifestId[0].required = true;
        } else {
          this.gateFieldLable = '出境国门';
          this.rules.manifestId[0].required = false;
        }

        this.getLoadBusinessTypeList()
      },
      businessTypeChange(val) {
        /* if('7'==val){
           this.rules.manifestId[0].required=false;
         }
         */
        // this.getLoadBusinessTypeList()
      },
      //作业场所变更
      workFieldCodeChange(workFieldCode) {
        let workField = this.selectBaseFieldInfoList.filter(n => workFieldCode == n.value)[0];
        if (workField.extVal1 == '1') { //口岸货场
          this.gateFieldItemShow = false;
          this.rules.gateFieldCode[0].required = false;
        } else if (workField.extVal1 == '2') { //国门
          this.gateFieldItemShow = false;
          this.rules.gateFieldCode[0].required = false;
        } else if (workField.extVal1 == '3') { //后置
          this.rules.gateFieldCode[0].required = true;
          this.gateFieldItemShow = true;
        }
      },
      //国门变更
      gateFieldCodeChange(gateFieldCode) {
        let gateField = this.selectBaseFieldInfoList.filter(n => gateFieldCode == n.value)[0];
        if (gateField.extVal1 != '2') {
          this.form.gateFieldCode = null;
          this.$modal.msgWarning("选择场所不是国门");
          return;
        }
      },


      // 获取详情
      loadDetail() {
        getEditGEmptyBills(this.editPlatSeqNo).then((res) => {
          if (res.code == 200) {
            this.form = res.data;
            this.dialogVisible = true;
          }
        });
      },

      // 选择车辆
      openSelectVehicle() {
        this.$refs.vehicleSel.open();
        this.$refs.vehicleInput.blur();
      },
      selectVehicleResult(vehicleList) {
        console.log("返回来了");
        console.log(vehicleList);
        if (vehicleList == null || vehicleList.length == 0) {
          return;
        }
        let item = vehicleList[vehicleList.length - 1];
        this.form.transportId = item.veCustomsNo;
        this.form.transportName = item.realVeNo;
        this.form.selfWt = item.selfWt;
        this.form.icCard = item.cardNo;
        this.form.rfid = item.rfid;
        this.form.location = '0';
        this.form.trayName = '';
        this.form.trayWeight = 0;


      },

      // 提交表单
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let params = {
              ...this.form,
            };
            if (this.dialogType == "add") {
              addGEmptyBills(this.form).then(res => {
                if (res.code === 200) {
                  this.$modal.msgSuccess("新增成功");
                  this.close();
                  this.$emit("handleQuery");
                }
              });
            } else {
              params.id = this.rowData.id;
              updateGEmptyBills(this.form).then(res => {
                if (res.code === 200) {
                  this.$modal.msgSuccess("修改成功");
                  this.close();
                  this.$emit("handleQuery");
                }
              });
            }
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped></style>
